<template>
	<view class="text-content">
		<!-- <mp-html :style="{padding:safeBottom + 60 +'px'}" class="my_html" :content="articleItem.content" /> -->

		<zero-markdown-view :style="`padding: ${safeBottom + 60}px`"  :markdown="articleItem.content"></zero-markdown-view>

		<view class="text-bottom" :style="{paddingBottom:safeBottom + 'px',height:60+safeBottom+'px'}">
			<view class="text-bottom-left">

				<image class="text-icons" :src='userInfo.user_avatar' mode="aspectFill" @click="goOtherUser"></image>
				
				<view v-if="userId === userInfo.user_id">
					<span  class="text-span-author" style="color: #b1d9fc;"> 作者  </span>
				</view>
				
				<view v-else @click="clickPassivity">
					<span v-if="!isLike" class="text-span" style="color: #3fc1c9;">+ 关注</span>
					<span v-else class="text-span" style="color: #fc5185;">已关注</span>
				</view>


			</view>
			<view class="text-bottom-right">
				<uni-badge :text="articleItem.likeNum" absolute="rightTop" :offset="[5, 3]" size="small">
					<view @click="clickLike(!likeItem.status)">
						<uni-icons v-if="likeItem.status" color="#95e1d3" type="hand-up-filled" size="30"></uni-icons>
						<uni-icons v-else color="#95e1d3" type="hand-up" size="30"></uni-icons>
					</view>
				</uni-badge>

				<uni-badge :text="articleItem.evaluate" absolute="rightTop" :offset="[5, 3]" size="small">
					<view @click="openPopup(likeItem.articleId)">
						<uni-icons color="#c3bef0" type="chatbubble-filled" size="30"></uni-icons>
					</view>
				</uni-badge>
				<uni-badge :text="articleItem.see" absolute="rightTop" :offset="[5, 3]" size="small">
					<view @click="clickCollect(!collectItem.status)">
						<uni-icons v-if="collectItem.status" color='#fce38a' type="star-filled" size="30"></uni-icons>
						<uni-icons v-else color='#fce38a' type="star" size="30"></uni-icons>
					</view>
				</uni-badge>
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup borderRadius="20px 20px" ref="popup" type="bottom" background-color="#fff">
				<view class="my-popup">

					<cc-comment ref="ccRef" v-model:myInfo="myInfo" v-model:userInfo="userInfo"
						v-model:tableData="tableData" v-model:tableTotal="tableTotal" :deleteMode="deleteMode"
						@likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun"></cc-comment>
					<view class="btn" @tap="openComment">发表新评论</view>
				</view>
			</uni-popup>
		</view>
	</view>

</template>

<script setup>
	import {
		SYSTEM_INFO
	} from '/utils/system.js'

	import {
		apiGetArticleDetails,
		apiGetArticleLike,
		apiGetArticleIsLike,
		apiGetArticleCollect,
		apiGetArticleIsCollect,
		apiGetReviewList,
		apiGetArticleReviewLike,
		apiGetArticAuthor,
		apiGetArtiReviewOne,
		apiGetArtiReviewTwo,
		apiDelArticReview,
		apiDelArticPassivity,
		apiDelArticIsPassivity
	} from '@/api/articleApi.js'
	const safeBottom = SYSTEM_INFO.safeAreaInsets.bottom
	import {
		BASE_IMG
	} from '@/utils/imgComBaseUrl.js'
	const {
		userId,
		userName,
		avatar
	} = uni.getStorageSync("userInfo");
	import {
		computed,
		ref,
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	onLoad(async(options) => {

		likeItem.value.articleId = options.id

		getArticleDetails(options.id)
		getIsLike(options.id)
		getIsCollect(options.id)
		await getUserInfo(options.id)
		await isPassivity()
	});
	async function isPassivity(){
		let parm = {
			userId:userId,
			passivityId:userInfo.value.user_id,
		}
		const res = await apiDelArticIsPassivity(parm)
		isLike.value = res.data
		
	}

	async function clickPassivity() {
		let parm = {
			userId:userId,
			userName:userName,
			passivityId:userInfo.value.user_id,
			passivityName:userInfo.value.user_name,
		}
		const res = await apiDelArticPassivity(parm)
		isLike.value = !isLike.value
		console.log("res",res)
	}

	async function getIsCollect(artId) {

		const {
			userId
		} = uni.getStorageSync("userInfo");
		collectItem.value.userId = userId
		collectItem.value.articleId = artId
		const {
			data
		} = await apiGetArticleIsCollect(userInf.value)
		//true:已经被收藏，false:未被收藏

		if (data) {
			collectItem.value.status = true
		} else {
			collectItem.value.status = false
		}
	}

	async function clickCollect(stat) {

		const {
			userId
		} = uni.getStorageSync("userInfo");

		collectItem.value.userId = userId
		collectItem.value.status = stat
		const res = await apiGetArticleCollect(collectItem.value)

	}

	const collectItem = ref({
		"articleId": null,
		"status": false,
		"userId": null
	})

	const likeItem = ref({
		"articleId": null,
		"status": false,
		"userId": null
	})

	async function clickLike(stat) {
		const {
			userId
		} = uni.getStorageSync("userInfo");
		likeItem.value.userId = userId
		likeItem.value.status = stat
		const res = await apiGetArticleLike(likeItem.value)

	}
	const userInf = ref({
		"articleId": null,
		"userId": null,
	})
	async function getIsLike(artId) {
		const {
			userId
		} = uni.getStorageSync("userInfo");
		userInf.value.userId = userId
		userInf.value.articleId = artId
		const {
			data
		} = await apiGetArticleIsLike(userInf.value)
		//true:已经被点赞，false:未被点赞

		if (data) {
			likeItem.value.status = true
		} else {
			likeItem.value.status = false
		}
	}

	const articleItem = ref({
		content:""
	})
	async function getArticleDetails(id) {
		const {
			data
		} = await apiGetArticleDetails(id)
		articleItem.value = data
	}

	const isLike = ref(false)
	const isShow = ref(true)
	const html = ref("<div>Hello World!</div>")

	function goOtherUser() {

		uni.navigateTo({
			url: '/pages/ohter-user/ohter-user?userId='+ userInfo.value.user_id 
			+ "&userName=" + userInfo.value.user_name 
			+ "&status=" + isLike.value
			+ "&userAvatar=" + userInfo.value.user_avatar
			
		})
	}
	const popup = ref(null)

	let tableTotal = ref(); // 评论总数
	let tableData = ref([]); // 评论表
	async function openPopup(articlId) {
		const {
			userId
		} = uni.getStorageSync("userInfo");
		const {
			data
		} = await apiGetReviewList(articlId, userId)
		tableData.value = data
		tableTotal.value = data.length
		popup.value.open();
	}

	//评论
	// 唤起新评论弹框
	let ccRef = ref(null);

	//true:一级评论，false:二级评论
	const isFlag = ref(false)

	function openComment() {
		console.log("发布评论")
		isFlag.value = true
		ccRef.value.newCommentFun();
	}

	// 点赞回调事件
	async function likeFun({
		params
	}, callback) {
		let {
			userId,
			userName
		} = uni.getStorageSync("userInfo");
		let data = {
			id: params.id,
			contentId: likeItem.value.articleId,
			userId: userId,
			userName: userName
		}
		if (!params.is_like) {
			data.status = 1
		}
		const res = await apiGetArticleReviewLike(data)
	}

	// 评论回复事件
	async function replyFun({
		params
	}, callback) {

		let data = {
			commentDetails: params.user_content,
			userId: userId,
			userName: userName,
		}
		if(tableData.value.length === 0){
			isFlag.value = true
		}
		if (isFlag.value) {
			console.log("一级评论")
			data.contentId = likeItem.value.articleId
			const res = await apiGetArtiReviewOne(data)
			console.log("res", res)
			isFlag.value = false
			callback({
				id: res.data
			})
		} else {
			data.id = params.parent_id
			const res = await apiGetArtiReviewTwo(data)
			console.log("res", res)
			console.log("二级级评论")
			callback({
				id: res.data
			})
		}
		data = {}
		console.log("replyFun", params);
		// 当请求成功, 调用callback执行评论插入;
		// Demo如下:
		// axios.post("http://xxx/reply", { ...params }).then((res) => {
		//   if (res.code === 0) {
		//     callback(res);
		//   }
		// });

	}

	/** 删除回调事件
	 * mode 删除模式
	 * -- bind: 当被删除的一级评论存在回复评论, 那么该用户评论内容变更显示为[当前用户评论内容已被移除]
	 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
	 * -- all : 删除所有评论包括回复评论
	 */
	const deleteMode = ref("all");

	async function deleteFun({
		params,
		mode
	}, callback) {
		let reviewId = params[0]
		const res = await apiDelArticReview(reviewId)
		console.log("deleteFun", {
			params,
			mode
		});
		// 当请求成功, 调用callback执行评论删除;
		// Demo如下:
		// axios.post("http://xxx/delete", { ids: params, mode }).then((res) => {
		//   if (res.code === 0) {
		//     callback(res);
		//   }
		// });
		switch (mode) {
			case "bind":
				// 逻辑: 调用接口进行用户评论内容修改 update
				setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				break;
			case "only":
				// 逻辑: 调用接口删除一个评论 delete
				setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				break;
			default:
				// all
				// 逻辑: 调用接口删除多个评论 [delete]
				setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				break;
		}
	}


	// 当前登录用户信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
	let myInfo = ref({
		user_id: userId, // 用户id
		user_name: userName, // 用户名
		user_avatar: BASE_IMG + avatar, // 用户头像地址
	});



	// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
	const userInfo = ref({
		user_id: null, // 用户id
		user_name: null, // 用户名
		user_avatar: null, // 用户头像地址
	});

	//获取文章作者信息
	async function getUserInfo(articleId) {
		const {
			data
		} = await apiGetArticAuthor(articleId)
		userInfo.value.user_id = data.userId
		userInfo.value.user_name = data.userName
		userInfo.value.user_avatar = BASE_IMG + data.avatar
	}
</script>

<style scoped lang="scss">
	.text-content {
		position: relative;
		min-height: 100vh;
		/* 确保页面容器至少占满整个视口高度 */
/* 		.my_html{
			padding: 80px;
			
		} */
	}

	.text-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #e4f9f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text-bottom-left {
		display: flex;
		width: 200rpx;
		align-items: center;
		justify-content: space-between;
		border-radius: 55rpx;
		background-color: #fff;
		margin: 0 30rpx;

		.text-icons {
			height: 65rpx;
			width: 65rpx;
			border-radius: 50%;
		}

		.text-span {
			margin-right: 25rpx;
		}
	}
	.text-span-author{
		margin-right: 45rpx;
	}

	.text-bottom-right {
		uni-badge {
			margin: 0 25rpx;
		}

	}

	.my-popup {
		max-height: 90vh;
		overflow-y: auto
	}

	.btn {
		text-align: center;
		color: #fff;
		padding: 20rpx;
		margin: 50rpx;
		border-radius: 20rpx;
		background-color: #2979ff;
	}
</style>